<template>
	<view class="edit" v-show="isShowEdit">
		<view class="mask">
			<view class="edit-inner">
				<view class="edit-main">
					<view class="edit-title">{{editTitle}}</view>
					<view class="sub-title">跟进状态</view>
					<view class="status-tab">
						<view class="status-tab-item" v-for="(item,index) in flowStatus" :data-flowindex="index" :class="{active:currentflowIndex==index}"
						 @click="flowTab">{{item}}</view>
					</view>
					<view class="sub-title">客户意向</view>
					<view class="status-tab">
						<view class="status-tab-item" v-for="(item,index) in clubStatus" :data-clubindex="index" :class="{active:currentclubIndex==index}"
						 @click="clubTab">{{item}}</view>
					</view>
					<view class="sub-title">是否创建待办</view>
					<view class="radio-box">
						<radio-group class="radio-group" @change="radioChange">
							<label v-for="(item,index) in checkedArr" class="radio" :key="item.value">
								<radio :value="item.value" class="ra" color="#3c67c2" :checked="checkIndex==index" />{{item.name}}</label>
						</radio-group>
					</view>
					<view v-if="checkIndex==1" class="sub-title">下次跟进时间</view>
					<view v-if="checkIndex==1" class="date-picker">
						<view class="left">日期</view>
						<view class="mid">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">{{date}}</view>
							</picker>
						</view>
					</view>
					<view v-if="checkIndex==1" class="date-picker">
						<view class="left">时间</view>
						<view class="mid">
							<picker mode="time" :value="time" start="06:00" end="23:59" @change="bindTimeChange">
								<view class="uni-input">{{time}}</view>
							</picker>
						</view>
					</view>

					<view class="textarea-container" v-if="checkIndex==1">
						<textarea class="textarea" :value="textareaText" cursor-spacing="30" @input="textareaInput" placeholder="请输入待办说明"
						 placeholder-class="pla-class" name="dsc" :maxlength="textareaMax"></textarea>
						<view class="textarea-footer">已输入{{textareaNum}}/{{textareaMax}}</view>
					</view>
				</view>


				<view class="edit-footer">
					<view class="edit-footer-item" @click="editCancle">取消</view>
					<view class="edit-footer-item confirm" :data-todoid="todoId" :data-clueid="clueId" @click="editConfirm">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import util from '../../utils/util.js';
	import {
		cacheGet
	} from '../../utils/cache.js';
	export default {
		name: 'edit',
		props: {
			isShowEdit: {
				type: Boolean,
				default: false
			},
			editTitle: {
				type: String,
				default: '设置'
			},
			editType: {
				type: String
			},
			clueId: {
				type: Number
			},
			todoId: {
				type: Number
			}
		},
		data() {
			return {
				flowStatus: ['跟进中', '成交', '战败'], //跟进状态
				clubStatus: ['无', '低', '中', '高'], //客户意向
				currentflowIndex: 0, //默认跟进状态
				currentclubIndex: 0, //默认客户意向
				nextDate: '请选择下次跟进时间',
				time: '09:00', //  默认时间
				date: util.getDateStr(0),
				startDate: util.getDateStr(0),
				endDate: util.getDateStr(365),
				textareaMax: 300, //文本域输入最大限制
				textareaNum: 0, //已输入多少文字
				textareaText: '', //文本内容
				checkedArr: [{
						value: '0',
						name: "否"
					},
					{
						value: '1',
						name: "是"
					}
				],
				checkIndex: -1,
			}
		},
		created() {},
		methods: {
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			//跟进状态
			flowTab(e) {
				let index = e.currentTarget.dataset.flowindex;
				this.currentflowIndex = index;
			},
			//客户意向
			clubTab(e) {
				let index = e.currentTarget.dataset.clubindex;
				this.currentclubIndex = index;
			},
			textareaInput(e) {
				let value = e.detail.value;
				this.textareaText = value;
				this.textareaNum = value.length;
			},
			//页面底部取消
			editCancle() {
				this.$emit('evenHideEdit');
			},
			//单选
			radioChange(e) {
				console.log(e);
				for (let i = 0; i < this.checkedArr.length; i++) {
					if (this.checkedArr[i].value === e.target.value) {
						this.checkIndex = i;
						break;
					}
				}
				console.log(this.checkIndex);
			},
			//页面底部确定
			editConfirm(e) {
				let self = this;
				self.nextDate = self.date + " " + self.time + ":00";
				if (this.checkIndex == -1) {
					uni.showToast({
						title: '请选择是否创建待办',
						icon: 'none'
					})
					return false;
				}
				
				if(this.checkIndex == 1){
					if (util.isNullOrEmpty(self.textareaText)) {
						uni.showToast({
							title: '请输入待办说明',
							icon: 'none'
						})
						return false;
					}
				}
				
				let todoid = e.currentTarget.dataset.todoid || 0;
				let clueid = e.currentTarget.dataset.clueid || 0;
				let userId = cacheGet('userId');

				let data = {
					preTodoID: todoid, //当前代办
					flowStep: self.currentflowIndex, //跟进状态
					purchaseStep: self.currentclubIndex, //客户意向
					todoDate: self.nextDate,
					comment: self.textareaText,
					userID: userId,
					clueID: clueid,
					createDate: "",
					isActive: 0,
					isRead: 0,
					IsNewTodo: self.checkIndex
				};

				data.flowStep++;
				console.log(data)
				this.$emit('evenEditConfirm', data);
				//提交后重置
				this.currentflowIndex = 0; //默认跟进状态
				this.currentclubIndex = 0; //默认客户意向
				this.nextDate = '请选择下次跟进时间';
				this.textareaText = '';
				this.checkIndex = -1;
			}
		}
	}
</script>

<style scoped>
	.mask {
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 3;
		background-color: rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		padding: 0 10%;
	}

	.mask .edit-inner {
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;
		border-radius: 14upx;

		z-index: 5;
	}

	.mask .edit-inner .edit-main {
		padding: 26upx;
	}

	.mask .edit-inner .edit-title {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 32upx;
		color: #333;
	}

	.mask .edit-inner .sub-title {
		line-height: 60upx;
		font-size: 26upx;
		color: #999;
	}

	.mask .edit-inner .status-tab {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		width: 100%;
		border-radius: 14upx;
		border: 1px solid #3c67c2;
		overflow: hidden;
	}

	.mask .edit-inner .status-tab .status-tab-item {
		box-sizing: border-box;
		flex: 1;
		font-size: 28upx;
		color: #3c67c2;
		text-align: center;
		line-height: 70upx;
		border-right: 1px solid #3c67c2;
	}

	.mask .edit-inner .status-tab .status-tab-item:last-child {
		border-right: none;
	}

	.mask .edit-inner .status-tab .status-tab-item.active {
		background-color: #3c67c2;
		color: #fff;
	}

	.date-picker {
		display: flex;
		align-items: center;
		line-height: 70upx;
		border-top: 1px solid #f1f1f1;
		border-bottom: 1px solid #f1f1f1;
		margin-bottom: 20upx;
	}

	.date-picker .left {
		flex: 4;
		font-size: 28upx;
		color: #666;
	}

	.date-picker .mid {
		flex: 5;
		font-size: 28upx;
		color: #666;
		text-align: right;
	}

	.date-picker .right {
		flex: 1;
		text-align: center;
	}

	.date-picker .right .icon {
		font-size: 32upx;
		color: #999;
	}

	.textarea-container {
		border: 1px solid #f1f1f1;
		border-radius: 8upx;
	}

	.textarea-container .textarea {
		box-sizing: border-box;
		width: 100%;
		height: 200upx;
		padding: 14upx 12upx;
		font-size: 28upx;
		color: #666;
	}

	.textarea-container .textarea-footer {
		font-size: 28upx;
		color: #999;
		text-align: right;
		padding: 0 12upx 14upx 0;
	}

	.edit-footer {
		border-top: 1px solid #f1f1f1;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		align-items: center;
	}

	.edit-footer .edit-footer-item {
		flex: 1;
		font-size: 32upx;
		color: #666;
		text-align: center;
		border-right: 1px solid #f1f1f1;
	}

	.edit-footer .edit-footer-item:last-child {
		border-right: none;
	}

	.edit-footer .edit-footer-item.confirm {
		color: #3c67c2;
	}

	.radio-box .radio-group {
		display: flex;
		align-items: center;
	}

	.radio-box .radio {
		flex: 1;
		font-size: 32upx;
		color: #666;
	}

	.radio-box .ra {
		vertical-align: middle;
		zoom: 0.8;
	}
</style>
